<template>
    <div>
        <h2 align="center">门店显示</h2>
        <div>
            门店名称:<input type="text" v-model="list.shopName"/>
            创建时间:<input type="date" v-model="list.datel"/>
            <input type="button" value="查询" class="btn btn-primary" @click="showall"/>

            <input type="button" value="批量修改" class="btn btn-info" />
            <input type="button" value="批量删除" class="btn btn-danger" />
        </div>
        <table class="table table-bordered">
            <tbody>

                <tr>
                    
                    <td>ID</td>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店地址</td>
                    <td>门店图片</td>
                    <td>客服电话</td>
                    <td>状态</td>
                    <td>简介</td>
                    <td>入住须知</td>
                    <td>交通指南</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.ID">
                    <td>{{item.Id}}</td>
                    <td>{{item.ShopName}}</td>
                    <td>{{item.BrancName}}</td>
                    <td>{{item.Address}}</td>
                    <td><img :src="item.Photo" width="50" height="50" alt=""/></td>
                    <td>{{item.Phone}}</td>
                    <td>{{item.State == 1 ? '启用':'禁用'}}</td>
                    <td>{{item.Desc}}</td>
                    <td>{{item.Notice}}</td>
                    <td>{{item.Traffic}}</td>
                    <td>{{moment(item.CreateTime).format('YYYY-MM-DD hh:mm')}}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="update(item.Id)"/>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)"/>
                        <input type="button" value="详情" class="btn btn-info" @click="xiang(item.Id)"/>
                        <input type="button" value="禁用" class="btn btn-success" v-if="item.State==0" @click="updatestate(item.Id,0)"/>
                        <input type="button" value="启用" class="btn btn-warning" v-if="item.State==1" @click="updatestate(item.Id,1)"/>
                    </td>
                </tr>
                
            </tbody>
        </table>

        <div>
            <span>共<b>{{data.totalCount}}</b>条</span>
            <span>每页<b>{{list.pageSize}}</b>条</span>
            <span>共<b>{{list.pageIndex}}/{{data.totalPage}}</b>页</span>

            <!--分页-->
            <input type="button" value="首页" @click="goPage(1)"/>
            <input type="button" value="上一页" @click="goPage(list.pageIndex - 1)"/>
            <span v-for="item in data.totalPage" @click="goPage(item)">{{item}}</span>
            <input type="button" value="下一页" @click="goPage(list.pageIndex + 1)"/>
            <input type="button" value="尾页" @click="goPage(data.totalPage)"/>
            <input type="number" v-model="list.pageIndex"/>
            <input type="button" value="跳转" @click="goPage(list.pageIndex)"/>

           <!--改变页容量-->
            <select v-model="list.pageSize" @change="showall">
                <option :value="item" v-for="item in arr">每页{{item}}条</option>
            </select>
        </div>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute} from 'vue-router';

const router = useRouter(); //页面跳转
const route = useRoute();  //接收参数

let list : any = reactive({
    pageIndex:1,
    pageSize:2,
    shopName:'',
    datel:''
});

//声明一个变量存储门店列表返回的数据
let data:any = reactive({
    list:[],
    totalCount:0,
    totalPage:0,
});

//声明一个变量表示页容量
let arr:any = ref([2,4,6,8]);



onMounted(()=>{
    showall();
})


//单个修改状态
const updatestate = (id:any,state:any)=>{
    let f = confirm('确定要修改吗?');
    if(f)
    {
        axios({
            url:'https://localhost:7176/api/Shop/Updatestate',
            method:'put',
            params:{id:id,state:state}
        })
        .then((res)=>{
            if(res.data > 0)
            {
                alert('修改成功');
            }
            else
            {
                alert('修改失败');
                return;
            }
        })
        .catch((err)=>{
            console.log(err);
        })
    }

}

//实现全选全不选



//分页
const goPage = (num:any) =>{

    //判断
    if(num < 1)
    {
        list.pageIndex = 1;
        return;
    }
    if(num > data.totalPage)
    {
        list.pageIndex = data.totalPage
        return;
    }
    list.pageIndex = num
    showall();
};


//单个删除
const del = (id:any) =>{
    let f = confirm('确定要删除吗?');

    if(f == true)
    {
        axios({
            url:'https://localhost:7176/api/Shop/DelShop',
            method:'delete',
            params:{id:id}
        })
        .then((res)=>{
            if(res.data > 0)
            {
                alert('删除成功');
                showall();
            }
            else
            {
                alert('删除失败')
                return;
            }
            
        })
        .catch((err)=>{
            console.log(err);
        })

    }

}


//显示
const showall = () =>{
    axios({
        url:'https://localhost:7176/api/Shop/GetAll',
        method:'get',
        params:list
    })
    .then((res)=>{
        Object.assign(data,res.data);
    })
    .catch((err)=>{
        console.log(err);
    })
}


//修改跳转并且路由传参
const update = (id:any) => {
    router.push({
        path:'shopUpdate',
        query:{id:id},
    })
}

//跳转详情页面
const xiang = (id:any) => {
    router.push({
        path:'shopXiang',
        query:{id:id},
    })
}




</script>

<style scoped>
b{
    color: red;
}
span{
    margin: 0 10px;
}
</style>